<template>
	<view :class="[ 'tag', name ]">
		<view class="iconfont" v-if="icon">{{ icon }}</view>
		<view>{{ text }}</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		text: {
			type: String,
			default: 'TAG'
		},
		icon: {
			type: String,
			default: ''
		},
		name: {
			type: String,
			default: ''
		}
	})
</script>



<style scoped lang="scss">
	.tag {
		display: flex;
		align-items: center;
		font-size: 11px;
		font-weight: 600;
		color: rgb(255, 255, 255);
		backdrop-filter: blur(10px);
		gap: 4px;
		padding: 6px 12px;
		border-radius: 20px;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(255, 255, 255, 0.2);
		border-image: initial;
		width: max-content;


		.iconfont {
			font-size: 12px !important;
		}
	}

	.upcoming {
		box-shadow: rgba(16, 185, 129, 0.3) 0px 4px 12px;
		background: linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105));
	}


	.blue {
		color: rgb(30, 64, 175);
		background: linear-gradient(135deg, rgb(219, 234, 254), rgb(191, 219, 254));
		border-color: rgba(59, 130, 246, 0.2);
		transition: 0.3s;
		white-space: nowrap;
	}

	.one {
		color: rgb(30, 64, 175);
		background: linear-gradient(135deg, rgb(219, 234, 254), rgb(191, 219, 254));
		border-color: rgba(59, 130, 246, 0.3);
		border-radius: 12px;
	}


	.next {
		color: rgb(146, 64, 14);
		background: linear-gradient(135deg, rgb(254, 243, 199), rgb(253, 230, 138));
		border-color: rgba(245, 158, 11, 0.3);
		border-radius: 12px;
	}

	.expert {
		box-shadow: rgba(239, 68, 68, 0.3) 0px 2px 8px;
		background: linear-gradient(135deg, rgb(239, 68, 68), rgb(220, 38, 38));
		font-size: 10px;
		font-weight: 700;
		color: rgb(255, 255, 255);
		text-transform: uppercase;
		letter-spacing: 0.5px;
		padding: 4px 10px;
		border-radius: 12px;
	}

	/* 待审核 */
	.pending {
		background: #fef3c7;
		color: #92400e;
		border-color: #f59e0b;
	}

	/**
	 * 通过审核
	 */
	.approved {
		background: #dcfce7;
		color: #166534;
		border-color: #22c55e;
	}

	/**
	 * 完善个人信息
	 */
	.missing {
		color: #92400e;
		background: rgba(146, 64, 14, 0.1);
		border: 1px solid rgba(146, 64, 14, 0.2);
	}
</style>